interface from {
  name?: string;
  remark?: string;
  id?: number;
  isEnable?: number;
}
import { PropType } from 'vue';
import {
  addLegalEntityTypeList,
  CheckLegalEntityTypeList,
  PutLegalEntityTypeList
} from '@/apis/management/organization/baseSetting/LegalEntityType/index';
import { validateRules } from '@/utils/common';
import { cloneDeep } from 'lodash';
import useGlobalParametersStore from '@/store/modules/globalParameters';
export default defineComponent({
  emits: ['changeVisible', 'openRefresh'],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    oldData: {
      type: Object as PropType<from>,
      default: () => {
        return undefined;
      }
    },
    refresh: {
      type: Boolean,
      default: false
    },
    refreshFn: {
      type: Function,
      default: () => {
        return undefined;
      }
    }
  },
  setup(props, { emit }) {
    watch(
      () => props.visible,
      async () => {
        if (props.visible) {
          if (props.oldData) {
            form.name = cloneDeep(props.oldData.name);
            // form.enable = props.oldData.enable === '是' ? true : false;
            form.remark = props.oldData.remark;
            form.isEnable = props.oldData.isEnable;
            form.id = props.oldData.id;
          }
        } else {
          form.name = '';
          form.isEnable = 2;
          // form.enable = false;
          form.remark = '';
          form.id = 0;
        }
      }
    );
    const store = useGlobalParametersStore();
    const refForm = ref<any>(null);

    // 校验名字查重
    const validateName = async (val: string, cb: any) => {
      try {
        if (val === props.oldData?.name && form.id) {
          //
        } else {
          const data = {
            name: val,
            type: 1
          };
          const res = await validateRules(CheckLegalEntityTypeList, data);
          if (res.code) {
            cb(`${res.msg}`);
          }
        }
      } catch (error: unknown) {
        console.log(error);
      }
    };

    const rules = {
      name: [
        {
          required: true,
          trigger: "['change', 'input', 'blur']",
          message: '请填写法律类型名称'
        },
        {
          validator: validateName
        }
      ]
    };

    const handleCancel = () => {
      emit('changeVisible', false);
    };
    const handleBeforeOk = async () => {
      if (await refForm.value.validate()) return;
      if (props.oldData) {
        const { name, remark, id, isEnable } = form;
        // const isEnable = form.enable;
        const res = await PutLegalEntityTypeList({
          name,
          remark,
          id,
          isEnable,
          type: 1
        });
        console.log(form, res);
        emit('openRefresh', true);
      } else {
        const { name, remark, isEnable } = form;
        // const isEnable = form.enable;
        const res = await addLegalEntityTypeList({
          name,
          remark,
          isEnable,
          type: 1
        });
        console.log(form, res);
        emit('openRefresh', true);
      }
      emit('changeVisible', false);
    };
    const form = reactive<from>({});
    return () => (
      <a-modal
        width="33%"
        visible={props.visible}
        unmount-on-close={true}
        title-align="center"
        onCancel={handleCancel}
        onOk={handleBeforeOk}
        v-slots={{
          title: () => (
            <div>
              {props.oldData ? '编辑' : '新增'}
              法律实体类型
            </div>
          ),
          footer: () => (
            <a-space>
              <a-button onClick={handleCancel}>取消</a-button>
              <a-button
                onClick={handleBeforeOk}
                type="primary"
                loading={store.getIsLoading}
              >
                确认
              </a-button>
            </a-space>
          )
        }}
      >
        <a-form
          ref={refForm}
          model={form}
          rules={rules}
          auto-label-width={true}
        >
          <a-form-item field="name" label="类型名称：" required>
            <a-input style=" width: 350px;" v-model={form.name} />
          </a-form-item>
          <a-form-item field="status" label="启用状态：">
            <a-switch
              v-model={form.isEnable}
              checked-value={1}
              unchecked-value={2}
            />
          </a-form-item>
          <a-form-item label="描述：">
            <a-textarea
              v-model={form.remark}
              allow-clear
              style=" width: 400px;"
              auto-size={{
                minRows: 8,
                maxRows: 8
              }}
            />
          </a-form-item>
        </a-form>
      </a-modal>
    );
  }
});
